<template>
    <div class="content">
        <section  class="carousel">
            <swiper :options="swiperOption">
            <swiper-slide class="onImages" v-for="slide in swiperSlides"  :key="slide.id">
               <img class="aggs"   :src="slide" >
               
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
            
            <div class="up_bottom1">
            </div>
            <div class="up_top">
                <a  class="up_top_left" href="/"><img src="@/assets/img/商品详情/images/images/商品详情1_03_06.png" alt=""></a>
                <div class="up_top_right">
                    <a onclick="getA()" href="javascript:;"><img src="@/assets/img/商品详情/images/images/商品详情1_03_08.png" alt=""></a>
                    <a href="javascript:;"><img src="@/assets/img/商品详情/images/images/商品详情1_03_03.png" alt=""></a>
                </div>
            </div>
            <div class="nav">
                <a href="./index1.html"><img src="@/assets/img/商品详情/images/images/images/images/商品详情1_01_03.png" alt=""></a>
                <div class='first'>
                    <p><a class="a" href="javascript:;"> 食材</a></p>
                    <p><a href="javascript:;">做法</a></p>
                    <p><a href="javascript:;">评价</a></p>
                </div>
            </div>
        </section>
       
        <div class="main_bottom">
            <a href="javascript:;"><h1>减脂韩式风味辣酱蘑菇 牛肉谷物饭</h1></a>
            <div class="up">
                <div class="up_left">
                    <ul class="up_left_left">
                        <li href="javascript:;"><a href="javascript:;"><img src="@/assets/img/商品详情/images/商品详情1_03.png" alt=""></a></li>
                        <li href="javascript:;"><a href="javascript:;"><img src="@/assets/img/商品详情/images/商品详情1_03.png" alt=""></a></li>
                        <li href="javascript:;"><a href="javascript:;"><img src="@/assets/img/商品详情/images/商品详情1_03.png" alt=""></a></li>
                        <li href="javascript:;"><a href="javascript:;"><img src="@/assets/img/商品详情/images/商品详情1_03.png" alt=""></a></li>
                        <li href="javascript:;"><a href="javascript:;"><img src="@/assets/img/商品详情/images/商品详情1_06.png" alt=""></a></li>
                        <a class="up_left_right1" href="">4.0</a> 
                    </ul>
                    <ul class="up_left_right">
                        <li>
                            <a href="javascript:;"><img src="@/assets/img/商品详情/images/images/images/商品详情1_03.png" alt=""></a>
                            <a href="javascript:;" id="text">1300</a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="@/assets/img/商品详情/images/images/images/商品详情1_05.png" alt=""></a>
                            <a href="javascript:;" id="text">680</a>
                        </li>
                    </ul>
                   
                </div>
                <h4>
                   <a href="javascript:;"> Hi~宝宝们好，很久没发减脂餐视频了，给大家推荐这道 低热量蘑菇牛肉谷物饭，真的超好吃，简直是太棒了！ 自己在家也可以动手制作</a>
                </h4>
                <ul class="up_bottom">
                    <li>
                        <a href="javascript:;">
                            <img src="@/assets/img/商品详情/images/商品详情1_11.png" alt="">
                            <p>2人餐</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="@/assets/img/商品详情/images/商品详情1_14.png" alt="">
                            <p>25min</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="@/assets/img/商品详情/images/商品详情1_16.png" alt="">
                            <p>中等</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            减脂餐
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            健康营养
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            韩式风味
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            蒜蓉
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            生姜
                        </a>
                    </li>
                </ul>
            </div>
            <ul class="header">
                <li class="list">
                    <div class="list_top">
                        <a href="javascript:;"><img src="@/assets/img/商品详情/images/images/images/images/商品详情1_01_07.png" alt=""></a>
                        <div class="list_top_left">
                            <a href="javascript:;">大厨神</a>
                            <p><a href="javascript:;">2600人关注</a></p>
                        </div>
                    </div>
                    <div class="list_bottom">
                        <p><a class="blue" href="javascript:;">关注ta</a></p>
                    </div>
                </li>
                <h2><a href="javascript:;">食材</a></h2>
                <li class="list">
                    <div class="list_top">
                        <a href="javascript:;"><img src="@/assets/img/商品详情/images/images/images/images/商品详情1_01_10.png" alt=""></a>
                        <div class="list_top_left">
                            <a href="javascript:;" class="a">胡萝卜</a>
                        </div>
                    </div>
                    <div class="list_bottom">
                        <p> <a href="javascript:;">20g</a> </p>
                    </div>
                </li>
                <li class="list">
                    <div class="list_top">
                        <a href="javascript:;"><img src="@/assets/img/商品详情/images/images/images/images/商品详情1_01_13.png" alt=""></a>
                        <div class="list_top_left">
                            <a href="javascript:;" class="a">蘑菇</a>
                        </div>
                    </div>
                    <div class="list_bottom">
                        <p> <a href="javascript:;">120g</a> </p>
                    </div>
                </li>
                <li class="list">
                    <div class="list_top">
                        <a href="javascript:;"><img src="@/assets/img/商品详情/images/images/images/images/商品详情1_01_16.png" alt=""></a>
                        <div class="list_top_left">
                            <a href="javascript:;" class="a">猪肉</a>
                        </div>
                    </div>
                    <div class="list_bottom">
                        <p> <a href="javascript:;">210g</a> </p>
                    </div>
                </li>
                <li class="list">
                    <div class="list_top">
                        <a href="javascript:;"><img src="@/assets/img/商品详情/images/images/images/images/商品详情1_01_19.png" alt=""></a>
                        <div class="list_top_left">
                            <a href="javascript:;" class="a">波菜</a>
                        </div>
                    </div>
                    <div class="list_bottom">
                        <p> <a href="javascript:;">50g</a> </p>
                    </div>
                </li>
                
                <div class="listd">
                    <h2><a href="javascript:;">做法</a></h2>
                    <div onclick="getTop(this)" class="listd_dd">
                       <a href="javascript:;"> <img src="@/assets/img/商品详情/向上.png" alt=""></a>
                    </div>
                </div>
                <li class="list listup">
                    <p class="p">
                        <a href="javascript:;">混合谷物饭、韩式牛肉、蘑菇、辣白菜、 三色彩椒、胡萝卜牛肉、胡萝卜、土豆、蘑菇、洋葱、彩椒、梨、韩式辣椒酱、料酒、精盐、味极鲜酱油、黑胡椒</a>
                    </p>
                </li>
            </ul>
        </div>
        
    </div>
        

        
    
</template>
<script>
import imgg1 from '@/assets/img/菜铺/菜谱_10.png'
import imgg2 from '@/assets/img/菜铺/菜谱_13.png'
import imgg3 from '@/assets/img/菜铺/菜谱_15.png'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
console.log("");
export default {
    
    data () {
    return {
        
      swiperOption: {　　　　　
        autoplay:true,//自动切换
        
        pagination: {
          el: '.swiper-pagination'//分页器
        }
      },
      swiperSlides: {sta1:imgg1,
        sta2:imgg2,
        sta3:imgg3,}
    }
  },
    components:{
    swiper,
    swiperSlide
  }
    

}
</script>
<style lang="">
   *{
    margin: 0;
    padding: 0;
}
.swiper-pagination{
    top: 12rem;
    z-index: 100;
}
body #app .Router {
    width: 15rem;
    display: none;
}


.content{
    /* background-color: #f4f4f4; */
}
.onImages{
    /* background: url("sta1"); */
}
.aggs{
    width: 100%;
}
p{

}
a{
    color: #000;
    text-decoration: none;
}
li{
    list-style-type: none;
}
.content{	
    width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-wrap: nowrap;
	align-items:flex-start;
	align-content:space-around
	/* background-color: aqua; */
}
.carousel{
    position: relative;
    z-index: 5;
    display: flex;
    /* flex-direction: column;
    justify-content: space-between; */
    /* background: url(../img/商品详情/images/images/images/商品详情1_01.png) no-repeat center center; */
    background-size: 26rem;
    width: 100%;
    height: 15rem;
}
.up_top{
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* display: none; */
    margin-left: 10%;
    margin-top: 1.5rem;
    /* background: #000; */
}
.up_top img{
    margin-top: 0.1rem;
    margin-right: 0.05rem;
    width: 0.8rem;  
    height: 0.8rem;
}
.up_top_left{
    width: 1rem;  
    height: 1rem;
    border-radius: 50%;
    background-color: #202a42;
    /* margin-top: 1.5rem; */
    /* margin-left: 1.5rem; */
}
.up_top_right{
    display: flex;
    flex-direction: row;
    /* margin-top: 1.5rem; */
    /* margin-right: 1.5rem; */
}
.up_top_right a{
    width: 1rem;  
    height: 1rem;
    border-radius: 50%;
    background-color: #202a42;
    margin-left: 1.5rem;
}
.up_bottom{
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    /* background-color: #fff; */
    /* height: 10.5rem; */
    width: 100%;
    
}
.up_bottom1{
    z-index: 10;
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    background-color: #fff;
    height: 2rem;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0rem;
}
.carousel .up_center{
    position: absolute;
    text-align: center;
    bottom: 3rem;
    left: 35%;
    float: left;
}
.carousel .up_center li:nth-child(1){
    border-radius: 50%;
    text-align: center;
    float: left;
    width: 1.5rem;
    height: 1.5rem;
    background-color: #fff;
    background-image: linear-gradient(to bottom right, #e4d0c6 , #969699);
}
.carousel .up_center li{
    /* border-radius: 50%; */
    /* margin-left: 0.5rem; */
    text-align: center;
    float: left;
    width: 1.5rem;
    height: 1.5rem;
    /* background-color: #fff; */
    /* background-image: linear-gradient(to bottom right, #e4d0c6 , #969699); */
}
.carousel .up_center li:nth-child(2) a{
    display: block;
    border-radius: 10px;
    width: 100%;
    margin-left: 0;
    margin-top: 0.5rem;
    
    
    height: 0.5rem;
    
}
.carousel .up_center li:nth-child(2){
    margin-left: 0.5rem;
    
}
.carousel .up_center li a{
    
    display: block;
    border-radius: 10px;
    width: 0.5rem;
    margin-left: 0.5rem;
    margin-top: 0.5rem;
    background-color: #fff;
    background-image: linear-gradient(to bottom right, #e4d0c6 , #969699);
    height: 0.5rem;
}
.carousel .up_center li img{
    border-radius: 50%;
    margin: 0.25rem;
    width: 1rem;
    height: 1rem;
}
.main_bottom{
   
  width: 81%;
   /* background-color: #fff; */
    margin:0 2rem 0 2rem;
    
}
.main_bottom h1{
    font-size: 1rem;
    letter-spacing: 0.19rem;
    font-weight: 500;
}
.main_bottom .up{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.main_bottom .up .up_left{
    text-align: center;
    width: 100%;
    margin: 0.5rem 0 0.5rem 0;
    height: 1.6rem;
    line-height: 1.6rem;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
}
.main_bottom .up .up_left .up_left_left{
    display: block;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
}
.main_bottom .up .up_left .up_left_left .up_left_right1{
    margin-left: 0.5rem;
    font-size: 0.4rem;
}
.main_bottom .up .up_left li{
    padding-top:0.1rem;
    /* width: 1rem; */
    /* height: 1rem; */
    /* line-height: 1rem; */
}
.main_bottom .up .up_left li img{
    padding-top: 0.4rem;
    width: 0.6rem;
    height: 0.5rem;
}
.main_bottom .up .up_left li:last-child{
    font-size: 16px;
    margin-left: 0.5rem;
}
.main_bottom .up .up_left_right{
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    line-height: 1.6rem;
    /* height: 2rem; */
    /* align-items: center; */
}
.main_bottom .up .up_left_right li{
    width: 3rem;
    /* display: flex; */
    /* flex-direction: row; */
    display: table-cell;
    line-height: 1rem;
    vertical-align:middle
} 
.main_bottom .up .up_left_right li:nth-child(2n){
    font-size: 0.6rem;
    /* height: 2rem; */
}
.main_bottom .up .up_left_right li img{
    /* padding-top: 0.6rem; */
    padding-right: 0.3rem;
}
.main_bottom .up .up_left_right li a{
    margin-top: -1.2rem;
}
.main_bottom .up .up_left_right li #text{
    font-size: 0.5rem;
}
.up h4{
    line-height: 25px;
    font-weight: 500;
    margin-bottom: 1rem;
}
.up .up_bottom{
    /* width: 100%; */
}
.up .up_bottom li{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    display: inline-block;
    width: 30%;
    height: 2rem;
    line-height: 2rem;
    background-color: #f5f5f5;
    margin-bottom: 0.5rem;
    /* margin-left: 0.8rem; */
    border-radius: 10px;
    /* margin: 0; */
}
.up .up_bottom li:nth-child(3n+1){
    /* margin: 0; */
}
.up .up_bottom li:nth-child(1),
.up .up_bottom li:nth-child(2),
.up .up_bottom li:nth-child(3){

}
.up .up_bottom li:nth-child(n+4){
    height: 2rem;
    line-height: 2rem;
    background-color: #e9faf8;
}
.up .up_bottom li a {
    font-size: 0.4rem;
}
.up .up_bottom li a img{
    display: inline-block;
    
    margin-bottom: -0.2rem;
    /* padding-right: 0.3rem; */
    width: 1rem;
    /* height: 1.5rem; */
}
.up .up_bottom li a p{
    padding-left: 0.2rem;
    display: inline-block;
    font-size: 0.5rem;
}



.nav{
    /* background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 3rem;
    margin-top: 9%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 1rem; */
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 3rem;
    /* margin-top: 9%; */
    padding-top: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 1rem;
    display: none;
}
.nav img{
    padding-top: 0.2rem;
    padding-left: 1.5rem;
    height: 1.5rem;
    width: 1.5rem;
}
.nav .first{
    padding-right: 5rem;
    margin-top: -0.1rem;
    margin-left:19%;
    width: 60%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.nav .first p a{
    
    font-size: 1.2rem;
    padding-bottom:0.3rem;
}
.nav .first p .a{
    
    border-bottom: 3px solid #2cd2b9;
}
.header{
    padding-top: 1rem;
    background-color: #fff;
    /* height: 50rem; */
    width: 100%;
}
.header .list{
    border-radius: 0.5rem;
    background-color: #f4f4f4;
    width: 100%;
    /* margin: 2.6rem; */
    margin-top: 0;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.header .list .list_top img{
    width: 2rem;
    height: 2rem;
   margin-bottom: 0.5rem;
   margin-right: 0.5rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
}
.header .list .list_top{
    
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.header .list .list_top .list_top_left{
    width: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.header .list .list_top .list_top_left a{
    font-size: 0.7rem;
    letter-spacing: 2px;
    margin-bottom: 0.3rem;
}
.header .list .list_top .list_top_left p a{
    font-size: 0.5rem;
}
.header .list  .list_bottom{
    width: 9.9rem;
    height: 3rem;
    line-height: 3rem;
    text-align: right;
}
.header .list  .list_bottom p{
    
    font-weight: 300;
    margin-right: 1rem;
}
.header .list  .list_bottom p a{
    font-size: 1rem;
}
.header .list  .list_bottom .blue{
    margin-right: 0;
    font-size: 0.5rem;
    padding: 0.5rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    border-radius: 1rem;
    background-color: #f4fcfb;
    border: 1px solid #2cd2b9;
    color: #2cd2b9;
}
.header h2{
    font-weight: 500;
    width: 80%;
    /* margin-left: 2rem; */
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: row;
} 
.header .list .list_top .list_top_left .a{
    padding-bottom:0;
    margin-bottom: 0;
}
.header .list .p{
    text-align: center;
    color: #2cd2b9;
    /* line-height: 2rem; */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 200;
    font-size: 1.1rem;
}
.header .list .p a{
    font-size: 0.5rem;
}
.header .listd{
    border-radius: 0.5rem;
    height: 1rem;
    width: 100%;
    margin: 0;
    margin-top: 0;
    /* margin-bottom: 1rem; */
    display: flex;
    flex-direction: row;
}
.header .listd h2{
    margin: 0;
}
.header .listd .listd_dd{
    display: none;
    position: fixed;
    bottom: 2rem;
    right: 3rem;
    border-radius: 50%;
    margin-top: 0.8rem;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 3.5rem;
    text-align: center;
    background-color: #2cd2b9;
}
.header .listd .listd_dd img{
    
    padding: 0.3rem;
    margin-top: -0.1rem;
    width: 1.8rem;
    height: 2rem;
}
.header .listup{
    /* margin-top: -1.5rem; */
}




</style>